{extend name="public:base" /}
{block name="css"}
<link href="/static/laydate/theme/default/laydate.css">
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">

                <div class="ibox-content">
                    <div class="row search-form">
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请选择开始日期" type="text" name="start_time" value="{:input('start_time')}" class="form-control form-control-lg screen-date" readonly>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请选择结束日期" type="text" name="end_time" value="{:input('end_time')}" class="form-control form-control-lg screen-date" readonly>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>

                    <style>
                        .census-box{
                            display: flex;
                            margin-top: 20px;
                            width: 320px;
                            justify-content: space-between;
                        }

                        .census-box .data-box{
                            display: flex;
                            height: 65px;
                            flex-direction: column;
                            align-items: center;
                            justify-content: space-between;
                        }

                        .census-box .data-box .title{
                            font-size: 16px;
                        }

                        .census-box .data-box .data{
                            font-size: 24px;
                        }
                    </style>
                    <div class="census-box">
                        <div class="data-box">
                            <div class="title">下单人数</div>
                            <div class="data">{$pay_user_count}</div>
                        </div>
                        <div class="data-box">
                            <div class="title">下单笔数</div>
                            <div class="data">{$pay_order_count}</div>
                        </div>
                        <div class="data-box">
                            <div class="title">下单金额</div>
                            <div class="data">{$pay_order_price}</div>
                        </div>
                    </div>


                    <div class="row">
                        <div class="col-lg-12">
                            <div class="ibox ">
                                <div class="ibox-content">
                                    <div id="main" style="width: 100%; height:600px;">

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

{/block}

{block name="js"}
<script src="/static/laydate/laydate.js"></script>
<script src="__ADMIN__/js/echarts.min.js"></script>
<script>
    laydate.render({
        elem: '.screen-date' //指定元素
    });


    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '交易统计',
            x: 'center'
        },

        dataZoom:[
            {
                type: "slider",
                show: true,
                xAxisIndex: [0],
                start: 0,
                end: 100,
                textStyle:{
                    color: "#ccd7d7"
                }
            }
        ],

        legend: {
            orient: 'horizontal',
            x: 'left',
            y: 'top',
            data: ['付款金额', '付款笔数', '付款人数']
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '10%',
            bottom: '5%',
            containLabel: true
        },
        xAxis: {
            name: '日期',
            type: 'category',
            data: {$time_list}
        },
        yAxis: {
            name: '总计',
            type: 'value'
        },

        series: [ // 多组折线图数据
            {
                name: '付款金额',
                data: {$pay_price_arr},
                type: 'line'
            },

            {
                name: '付款笔数',
                data: {$pay_order_arr},
                type: 'line',
            },

            {
                name: '付款人数',
                data: {$pay_user_arr},
                type: 'line'
            }
        ],
        tooltip: {
            type: 'cross',
            trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
            backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
            borderRadius: 8,           // 提示边框圆角，单位px，默认为4
            padding: 10,                // 提示内边距，单位px，默认各方向内边距为5，
            textStyle: {
                color: '#fff'
            },
            valueFormatter: (value) => value
        },
        color: ['#3366CC', '#FFCC99', '#99CC33']
    }

    myChart.setOption(option);
</script>
{/block}

